<template>
  <div class="global-search">
    <div class="search-input-wrapper">
      <div class="search-input">
        <i class="search-icon van-icon van-icon-search"></i>
        <input
          ref="searchInput"
          v-model="keyword"
          type="text"
          placeholder="搜索"
          @input="handleInput"
          @keyup.enter="performSearch"
          @focus="handleFocus"
          @blur="handleBlur"
        />
        <i
          v-if="keyword"
          class="clear-icon van-icon van-icon-clear"
          @click="clearSearch"
        ></i>
      </div>
    </div>

    <div v-if="showResults" class="search-results">
      <div v-if="loading" class="loading-container">
        <i class="van-icon van-icon-more-o loading-icon"></i>
        <span>正在搜索...</span>
      </div>

      <template v-else-if="step === 'initial' && !keyword">
        <!-- 初始状态：显示搜索历史和热门搜索 -->
        <div v-if="searchHistory.length > 0" class="history-section">
          <div class="section-header">
            <span>搜索历史</span>
            <div class="edit-history" @click="toggleEditMode">
              {{ isEditMode ? '完成' : '编辑' }}
            </div>
          </div>
          <div class="history-list" :class="{ 'edit-mode': isEditMode }">
            <div
              v-for="(item, index) in searchHistory"
              :key="`history-${index}`"
              class="history-item"
              @click="useHistoryItem(item)"
            >
              <i class="van-icon van-icon-clock-o"></i>
              <span>{{ item }}</span>
              <i v-if="isEditMode" class="van-icon van-icon-cross delete-icon" @click.stop="removeHistoryItem(index)"></i>
            </div>
          </div>
        </div>

        <div class="hot-section">
          <div class="section-header">
            <span>热门搜索</span>
            <div class="refresh-trending" @click="refreshHotSearches">
              <i class="van-icon van-icon-replay"></i>
            </div>
          </div>
          <div class="hot-list">
            <div
              v-for="(item, index) in hotSearches"
              :key="`hot-${index}`"
              class="hot-item"
              :class="getRankClass(index)"
              @click="useHistoryItem(item)"
            >
              <span class="rank-number" v-if="index < 3">{{ index + 1 }}</span>
              {{ item }}
            </div>
          </div>
        </div>
      </template>

      <template v-else-if="step === 'suggestions' && suggestions.length > 0">
        <!-- 建议状态：显示搜索建议 -->
        <div class="suggestion-list">
          <div
            v-for="(suggestion, index) in suggestions"
            :key="`suggestion-${index}`"
            class="suggestion-item"
            @click="useSuggestion(suggestion)"
          >
            <i :class="`van-icon van-icon-${suggestion.icon || 'search'}`"></i>
            <span v-html="highlightKeyword(suggestion.value, keyword)"></span>
          </div>
        </div>
      </template>

      <template v-else-if="step === 'results'">
        <!-- 高级搜索筛选条件 -->
        <div class="search-filters">
          <div class="filter-tags" v-if="hasActiveFilters">
            <div class="filter-tag" 
                 v-for="(value, key) in activeFilters" 
                 :key="key"
                 @click="removeFilter(key)">
              {{ getFilterLabel(key, value) }}
              <i class="van-icon van-icon-cross"></i>
            </div>
          </div>
          
          <div class="filter-button" @click="toggleAdvancedSearch">
            <i class="van-icon van-icon-filter-o"></i>
            <span>筛选</span>
          </div>
        </div>
        
        <!-- 高级搜索面板 -->
        <div class="advanced-search-panel" v-if="showAdvancedSearch">
          <div class="filter-group">
            <div class="filter-label">结果类别</div>
            <div class="filter-options">
              <div class="filter-checkbox" 
                   v-for="option in typeOptions" 
                   :key="option.value"
                   @click="toggleFilterOption('type', option.value)">
                <i :class="isFilterSelected('type', option.value) ? 'van-icon van-icon-checked' : 'van-icon van-icon-circle'"></i>
                <span>{{ option.label }}</span>
              </div>
            </div>
          </div>
          
          <div class="filter-group">
            <div class="filter-label">时间范围</div>
            <div class="date-filters">
              <div class="date-option" 
                   v-for="option in dateOptions" 
                   :key="option.value"
                   :class="{ 'active': searchFilters.dateRange === option.value }"
                   @click="setFilter('dateRange', option.value)">
                {{ option.label }}
              </div>
            </div>
          </div>
          
          <div class="filter-actions">
            <button class="btn-reset" @click="resetSearchFilters">重置</button>
            <button class="btn-apply" @click="applySearchFilters">应用</button>
          </div>
        </div>
        
        <!-- 搜索结果排序 -->
        <div class="search-sort">
          <div class="sort-options">
            <div class="sort-option" 
                 v-for="option in sortOptions" 
                 :key="option.value"
                 :class="{ 'active': currentSort === option.value }"
                 @click="setSortOption(option.value)">
              {{ option.label }}
              <i :class="getSortIcon(option.value)"></i>
            </div>
          </div>
        </div>

        <!-- 结果状态：显示搜索结果 -->
        <div v-if="groupedResults.length > 0" class="result-list">
          <div
            v-for="(group, groupIndex) in groupedResults"
            :key="`group-${groupIndex}`"
            class="result-group"
          >
            <div class="group-header">
              <i :class="`van-icon van-icon-${getGroupIcon(group.type)}`"></i>
              <span>{{ getGroupName(group.type) }}</span>
              <span class="group-count">{{ group.items.length }}个结果</span>
            </div>
            <div class="group-items">
              <div
                v-for="(item, itemIndex) in group.items"
                :key="`result-${groupIndex}-${itemIndex}`"
                class="result-item"
                @click="navigateToResult(item)"
              >
                <div class="result-icon" :style="{ backgroundColor: getTypeColor(item.type) }">
                  <i :class="`van-icon van-icon-${getTypeIcon(item.type)}`"></i>
                </div>
                <div class="result-content">
                  <div class="result-title" v-html="highlightKeyword(item.name, keyword)"></div>
                  <div class="result-desc" v-html="highlightKeyword(item.description, keyword)"></div>
                  <div class="result-meta">
                    <span class="result-type">{{ getTypeName(item.type) }}</span>
                    <span class="result-path">{{ item.path }}</span>
                  </div>
                </div>
                <div class="result-actions">
                  <i class="van-icon van-icon-arrow"></i>
                </div>
              </div>
            </div>
            <div v-if="group.hasMore" class="group-more" @click="loadMoreResults(group.type)">
              加载更多 <i class="van-icon van-icon-arrow-down"></i>
            </div>
          </div>
        </div>
        <div v-else class="empty-result">
          <i class="van-icon van-icon-info-o"></i>
          <p>没有找到相关结果</p>
          <div class="search-tips">
            <div class="tips-title">搜索建议:</div>
            <ul class="tips-list">
              <li>检查您的拼写</li>
              <li>尝试使用更简短、更一般的关键词</li>
              <li>尝试使用同义词</li>
            </ul>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { ref, computed, watch, onMounted, onBeforeUnmount, reactive } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { debounce } from '@/utils/common'

export default {
  name: 'GlobalSearch',
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { emit }) {
    const store = useStore()
    const router = useRouter()
    const searchInput = ref(null)
    const keyword = ref('')
    const step = ref('initial') // initial, suggestions, results
    const showResults = ref(false)
    const isEditMode = ref(false)
    const showAdvancedSearch = ref(false)
    
    // 排序和筛选
    const currentSort = ref('relevance')
    const sortOptions = [
      { label: '相关度', value: 'relevance' },
      { label: '最新', value: 'latest' },
      { label: '最旧', value: 'oldest' }
    ]
    
    const searchFilters = reactive({
      type: [],
      dateRange: 'all'
    })
    
    const typeOptions = [
      { label: '财务', value: 'finance' },
      { label: '物资', value: 'material' },
      { label: '资产', value: 'asset' },
      { label: '个人', value: 'profile' }
    ]
    
    const dateOptions = [
      { label: '全部时间', value: 'all' },
      { label: '今天', value: 'today' },
      { label: '本周', value: 'week' },
      { label: '本月', value: 'month' }
    ]
    
    // 从store获取状态
    const loading = computed(() => store.state.search.loading)
    const searchHistory = computed(() => store.state.search.searchHistory)
    const hotSearches = computed(() => store.state.search.hotSearches)
    const suggestions = computed(() => store.state.search.suggestions)
    const results = computed(() => store.state.search.results)
    
    // 获取活跃的筛选条件
    const activeFilters = computed(() => {
      const filters = {}
      if (searchFilters.type.length > 0) {
        filters.type = searchFilters.type
      }
      if (searchFilters.dateRange !== 'all') {
        filters.dateRange = searchFilters.dateRange
      }
      return filters
    })
    
    const hasActiveFilters = computed(() => {
      return Object.keys(activeFilters.value).length > 0
    })
    
    // 监听value变化，自动聚焦搜索框
    watch(() => props.value, (newVal) => {
      if (newVal) {
        // 延迟聚焦以确保DOM已更新
        setTimeout(() => {
          searchInput.value && searchInput.value.focus()
        }, 100)
        
        // 初始化数据
        fetchInitialData()
      } else {
        // 关闭搜索时重置状态
        step.value = 'initial'
        showResults.value = false
        showAdvancedSearch.value = false
      }
    })
    
    // 监听keyword变化
    watch(keyword, (newValue) => {
      if (!newValue || newValue.trim() === '') {
        step.value = 'initial'
      }
    })
    
    // 初始化
    onMounted(() => {
      fetchInitialData()
      document.addEventListener('click', handleOutsideClick)
    })
    
    onBeforeUnmount(() => {
      document.removeEventListener('click', handleOutsideClick)
    })
    
    // 获取初始数据
    const fetchInitialData = async () => {
      await store.dispatch('search/fetchHotSearches')
      await store.dispatch('search/fetchSearchHistory')
    }
    
    // 刷新热门搜索
    const refreshHotSearches = () => {
      store.dispatch('search/fetchHotSearches')
    }
    
    // 处理输入
    const handleInput = debounce(async () => {
      const value = keyword.value.trim()
      if (!value) {
        step.value = 'initial'
        return
      }
      
      // 获取搜索建议
      await store.dispatch('search/fetchSuggestions', value)
      
      if (suggestions.value && suggestions.value.length > 0) {
        step.value = 'suggestions'
      }
    }, 300)
    
    // 执行搜索
    const performSearch = async () => {
      const value = keyword.value.trim()
      if (!value) return
      
      step.value = 'results'
      
      // 构建搜索参数
      const params = { 
        page: 1, 
        limit: 20,
        sort: currentSort.value 
      }
      
      // 添加筛选条件
      if (searchFilters.type.length > 0) {
        params.types = searchFilters.type.join(',')
      }
      
      if (searchFilters.dateRange !== 'all') {
        params.dateRange = searchFilters.dateRange
      }
      
      await store.dispatch('search/doSearch', {
        keyword: value,
        params: params
      })
    }
    
    // 清除搜索
    const clearSearch = () => {
      keyword.value = ''
      step.value = 'initial'
    }
    
    // 处理聚焦
    const handleFocus = () => {
      showResults.value = true
    }
    
    // 处理失焦
    const handleBlur = () => {
      // 延时隐藏结果，以便可以点击结果
      setTimeout(() => {
        if (!document.activeElement.closest('.global-search')) {
          showResults.value = false
        }
      }, 200)
    }
    
    // 使用历史记录或热门搜索项
    const useHistoryItem = (item) => {
      keyword.value = item
      performSearch()
    }
    
    // 使用搜索建议
    const useSuggestion = (suggestion) => {
      keyword.value = suggestion.value
      performSearch()
    }
    
    // 导航到搜索结果
    const navigateToResult = (item) => {
      if (item.path) {
        router.push(item.path)
        emit('input', false)
      }
    }
    
    // 切换编辑模式
    const toggleEditMode = () => {
      isEditMode.value = !isEditMode.value
    }
    
    // 删除历史记录项
    const removeHistoryItem = (index) => {
      const newHistory = [...searchHistory.value]
      newHistory.splice(index, 1)
      store.commit('search/SET_SEARCH_HISTORY', newHistory)
    }
    
    // 清除历史
    const clearHistory = () => {
      store.dispatch('search/clearSearchHistory')
    }
    
    // 获取排名样式
    const getRankClass = (index) => {
      if (index === 0) return 'rank-first'
      if (index === 1) return 'rank-second'
      if (index === 2) return 'rank-third'
      return ''
    }
    
    // 高亮关键词
    const highlightKeyword = (text, keyword) => {
      if (!keyword || !text) return text
      
      const regex = new RegExp(keyword, 'gi')
      return text.replace(regex, match => `<span class="highlight">${match}</span>`)
    }
    
    // 处理外部点击
    const handleOutsideClick = (event) => {
      const searchContainer = document.querySelector('.global-search')
      if (searchContainer && !searchContainer.contains(event.target)) {
        showResults.value = false
      }
    }
    
    // 按类型分组结果
    const groupedResults = computed(() => {
      if (!results.value || !results.value.length) return []
      
      const groups = {}
      
      // 按类型分组
      results.value.forEach(item => {
        if (!groups[item.type]) {
          groups[item.type] = []
        }
        groups[item.type].push(item)
      })
      
      // 转换为数组格式并应用排序
      return Object.keys(groups).map(type => {
        const items = groups[type]
        return {
          type,
          items: items.slice(0, 5), // 每组最多显示5个
          hasMore: items.length > 5,
          total: items.length
        }
      })
    })
    
    // 加载更多结果
    const loadMoreResults = (type) => {
      // 实际实现中可以调用API加载更多，这里简单展示
      console.log(`加载更多 ${type} 类型的结果`)
    }
    
    // 获取分组图标
    const getGroupIcon = (type) => {
      switch (type) {
        case 'finance':
          return 'balance-o'
        case 'material':
          return 'shopping-cart-o'
        case 'asset':
          return 'desktop-o'
        case 'profile':
          return 'user-o'
        default:
          return 'search'
      }
    }
    
    // 获取类型图标
    const getTypeIcon = (type) => {
      return getGroupIcon(type)
    }
    
    // 获取分组名称
    const getGroupName = (type) => {
      switch (type) {
        case 'finance':
          return '财务'
        case 'material':
          return '物资'
        case 'asset':
          return '资产'
        case 'profile':
          return '个人'
        default:
          return '其他'
      }
    }
    
    // 获取类型名称
    const getTypeName = (type) => {
      return getGroupName(type)
    }
    
    // 获取类型颜色
    const getTypeColor = (type) => {
      switch (type) {
        case 'finance':
          return '#1890ff'
        case 'material':
          return '#52c41a'
        case 'asset':
          return '#722ed1'
        case 'profile':
          return '#faad14'
        default:
          return '#909399'
      }
    }
    
    // 筛选相关方法
    const toggleAdvancedSearch = () => {
      showAdvancedSearch.value = !showAdvancedSearch.value
    }
    
    const toggleFilterOption = (key, value) => {
      if (key === 'type') {
        const index = searchFilters.type.indexOf(value)
        if (index > -1) {
          searchFilters.type.splice(index, 1)
        } else {
          searchFilters.type.push(value)
        }
      }
    }
    
    const isFilterSelected = (key, value) => {
      if (key === 'type') {
        return searchFilters.type.includes(value)
      }
      return searchFilters[key] === value
    }
    
    const setFilter = (key, value) => {
      searchFilters[key] = value
    }
    
    const resetSearchFilters = () => {
      searchFilters.type = []
      searchFilters.dateRange = 'all'
    }
    
    const applySearchFilters = () => {
      showAdvancedSearch.value = false
      performSearch()
    }
    
    const removeFilter = (key) => {
      if (key === 'type') {
        searchFilters.type = []
      } else {
        searchFilters[key] = key === 'dateRange' ? 'all' : ''
      }
      performSearch()
    }
    
    const getFilterLabel = (key, value) => {
      if (key === 'type') {
        return `类型: ${value.length}个已选`
      } else if (key === 'dateRange') {
        const dateOption = dateOptions.find(option => option.value === value)
        return `时间: ${dateOption ? dateOption.label : value}`
      }
      return `${key}: ${value}`
    }
    
    // 排序相关方法
    const setSortOption = (value) => {
      currentSort.value = value
      performSearch()
    }
    
    const getSortIcon = (value) => {
      if (currentSort.value !== value) return ''
      
      if (value === 'latest') {
        return 'van-icon van-icon-arrow-down'
      } else if (value === 'oldest') {
        return 'van-icon van-icon-arrow-up'
      }
      return ''
    }
    
    return {
      searchInput,
      keyword,
      step,
      showResults,
      loading,
      searchHistory,
      hotSearches,
      suggestions,
      groupedResults,
      handleInput,
      performSearch,
      clearSearch,
      handleFocus,
      handleBlur,
      useHistoryItem,
      useSuggestion,
      navigateToResult,
      clearHistory,
      getGroupIcon,
      getGroupName,
      getTypeIcon,
      getTypeName,
      getTypeColor,
      highlightKeyword,
      loadMoreResults,
      
      // 编辑模式
      isEditMode,
      toggleEditMode,
      removeHistoryItem,
      getRankClass,
      refreshHotSearches,
      
      // 筛选和排序
      showAdvancedSearch,
      searchFilters,
      activeFilters,
      hasActiveFilters,
      typeOptions,
      dateOptions,
      currentSort,
      sortOptions,
      toggleAdvancedSearch,
      toggleFilterOption,
      isFilterSelected,
      setFilter,
      resetSearchFilters,
      applySearchFilters,
      removeFilter,
      getFilterLabel,
      setSortOption,
      getSortIcon
    }
  }
}
</script>

<style scoped>
.global-search {
  position: relative;
  width: 100%;
}

.search-input-wrapper {
  padding: 10px 16px;
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.search-input {
  position: relative;
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 8px 12px;
}

.search-icon {
  margin-right: 8px;
  color: #999;
}

.search-input input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}

.clear-icon {
  color: #999;
  padding: 4px;
  cursor: pointer;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 8px 8px;
  z-index: 100;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
  color: #999;
}

.loading-icon {
  font-size: 24px;
  margin-bottom: 8px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  color: #999;
  font-size: 13px;
}

.edit-history, .refresh-trending {
  color: #1890ff;
  font-size: 12px;
  cursor: pointer;
}

.history-list, .suggestion-list {
  padding: 0 12px 12px;
}

.history-item, .suggestion-item {
  display: flex;
  align-items: center;
  padding: 10px 4px;
  color: #333;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.history-list.edit-mode .history-item {
  padding-right: 30px;
}

.delete-icon {
  position: absolute;
  right: 4px;
  color: #999;
  padding: 4px;
}

.history-item i, .suggestion-item i {
  margin-right: 8px;
  color: #999;
}

.hot-list {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12px 12px;
}

.hot-item {
  background-color: #f5f5f5;
  color: #666;
  padding: 6px 12px;
  border-radius: 16px;
  margin: 0 8px 8px 0;
  font-size: 13px;
  position: relative;
}

.rank-number {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border-radius: 50%;
  background-color: #999;
  color: #fff;
  font-size: 10px;
  margin-right: 4px;
}

.rank-first .rank-number {
  background-color: #f5222d;
}

.rank-second .rank-number {
  background-color: #fa8c16;
}

.rank-third .rank-number {
  background-color: #faad14;
}

/* 搜索过滤和排序 */
.search-filters {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f5f5f5;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  gap: 8px;
}

.filter-tag {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  background-color: #e6f7ff;
  color: #1890ff;
  border-radius: 4px;
  font-size: 12px;
}

.filter-tag i {
  margin-left: 4px;
}

.filter-button {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 13px;
  margin-left: 8px;
}

.filter-button i {
  margin-right: 4px;
}

.advanced-search-panel {
  padding: 16px;
  border-bottom: 1px solid #f5f5f5;
  background-color: #f9f9f9;
}

.filter-group {
  margin-bottom: 16px;
}

.filter-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 8px;
  font-weight: 500;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.filter-checkbox {
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #666;
}

.filter-checkbox i {
  margin-right: 4px;
  font-size: 16px;
  color: #1890ff;
}

.date-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.date-option {
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: #666;
  background-color: #fff;
  border: 1px solid #e8e8e8;
}

.date-option.active {
  background-color: #e6f7ff;
  color: #1890ff;
  border-color: #91d5ff;
}

.filter-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.filter-actions button {
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
}

.btn-reset {
  margin-right: 8px;
  background-color: #fff;
  color: #666;
}

.btn-apply {
  background-color: #1890ff;
  color: #fff;
  border-color: #1890ff;
}

.search-sort {
  padding: 10px 16px;
  border-bottom: 1px solid #f5f5f5;
}

.sort-options {
  display: flex;
  align-items: center;
}

.sort-option {
  margin-right: 16px;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sort-option.active {
  color: #1890ff;
  font-weight: 500;
}

.sort-option i {
  margin-left: 4px;
}

/* 结果展示 */
.result-group {
  margin-bottom: 12px;
}

.group-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  color: #666;
  background-color: #f9f9f9;
  font-size: 14px;
  font-weight: 500;
}

.group-header i {
  margin-right: 8px;
}

.group-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: normal;
  color: #999;
}

.group-items {
  padding: 0 16px;
}

.result-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  position: relative;
}

.result-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  color: white;
  flex-shrink: 0;
}

.result-content {
  flex: 1;
  min-width: 0;
}

.result-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
  font-weight: 500;
}

.result-desc {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.result-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.result-type {
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 8px;
}

.result-path {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result-actions {
  margin-left: 8px;
  color: #999;
}

.group-more {
  text-align: center;
  padding: 10px 0;
  color: #1890ff;
  font-size: 13px;
  cursor: pointer;
}

.empty-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  color: #999;
}

.empty-result i {
  font-size: 32px;
  margin-bottom: 8px;
}

.search-tips {
  margin-top: 16px;
  width: 100%;
  max-width: 300px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 8px;
}

.tips-title {
  font-weight: 500;
  margin-bottom: 8px;
  color: #666;
}

.tips-list {
  padding-left: 16px;
  margin: 0;
  font-size: 13px;
}

.tips-list li {
  margin-bottom: 4px;
}

/* 高亮关键词 */
:deep(.highlight) {
  color: #1890ff;
  font-weight: 500;
  background-color: rgba(24, 144, 255, 0.1);
  padding: 0 2px;
}
</style> 